<template>
	<view class="pay-status">
		<view class="pay-box">
			<image :src="$imgUrl + '/personal/success-icon.png'" class="pay-icon"></image>
			<view class="pay-title">支付成功</view>
		</view>
		<view class="pay-amount">￥100.00</view>
		<view class="pay-btm">
			<view class="pay-button" @click="callBack">完成</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const callBack = () =>{
		uni.switchTab({
			url: '/pages/personal/index'
		})
	}
</script>
<style>
	page{
		height: 100%;
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.pay-status{
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100%;
		// text-align: center;
		.pay-box{
			display: flex;
			flex-direction: row;
			padding: 62rpx 0 258rpx 0;
		}
		.pay-title{
			color: rgba(253, 150, 24, 1);
			font-size: 34rpx;
			font-weight: bold;
			margin-left: 20rpx;
		}
		.pay-amount{
			color: rgba(25, 25, 25, 1);
			font-size: 76rpx;
			font-weight: bold;
		}
		.pay-button{
			width: 354rpx;
			height: 96rpx;
			background: #F2F2F2;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			color: rgba(253, 150, 24, 1);
			font-size: 34rpx;
			text-align: center;
			background: rgba(242, 242, 242, 1);
			line-height: 96rpx;
			margin-bottom: 60rpx;
		}
		.pay-icon{
			width: 56rpx;
			height: 56rpx;
		}
		.pay-btm{
			flex: 1;
			display: flex;
			flex-direction: column-reverse;
		}
	}
</style>